<html>

<head>

<style>

body{font-family:arial;}

a{color:black;text-decoration:none;font:bold}

a:hover{color:#ffffff}

td.menu{background:#278acd}

table.nav

{

background:black;

position:relative;

font: bold 80% arial;

top:0px;

left:-135px;

}

</style>

<script type="text/javascript">

var i=-135

var intHide

var speed=3

function showmenu()

{

clearInterval(intHide)

intShow=setInterval("show()",10)

}

function hidemenu()

{

clearInterval(intShow)

intHide=setInterval("hide()",10)

}

function show()

{

if (i<-12)

{

i=i+speed

document.getElementById('myMenu').style.left=i

}

}

function hide()

{

if (i>-135)

{

i=i-speed

document.getElementById('myMenu').style.left=i

}

}

</script>

</head>

<body>

<table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">

<tr><td class="menu" align="center"><a href="#">HOME</a></td>

<td rowspan="5" align="center" bgcolor="#257df8" >M<br />E<br />N<br />U</td></tr>

<tr><td class="menu" align="center"><a href="#">xxx</a></td></tr>

<tr><td class="menu" align="center"><a href="#">xxx</a></td></tr>

<tr><td class="menu" align="center"><a href="#">xxx</a></td></tr>

<tr><td class="menu" align="center"><a href="#">xxx</a></td></tr>

</table>

<p>如果不了解代码可以将代码复制到记事本保存，重命名为XX.html

</p><p>修改相应参数，观察就可以知晓了</p>

<p> "speed" 变量，改变菜单的滑动速度。</p>

</body>

</html>